<template>
  <div class="mailCheck_card">
    <p>请输入新的邮箱</p>

    <el-form>
      <br>
      <el-form-item>
        <el-input placeholder="请输入新邮箱" v-model="userMail" prefix-icon="el-icon-message" />
        <p :style="{color:'red','font-size':'10px'}">{{ mailVerification }}</p>
      </el-form-item>
      <br>
      <el-row :gutter="38">
        <el-col :span="16">
          <el-form-item>
            <el-input placeholder="请输入收到的验证码" v-model="userCheck" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!--需要后期加上一分钟发送一次验证码-->
          <el-button :disabled="dis" @click="getCode">
            <template v-if="sending">获取验证码</template>
            <template v-else>{{second}}秒后重发</template>
          </el-button>
        </el-col>
      </el-row>
      <br>
      <br>
      <el-form-item>
        <el-button @click="onSubmit" type="primary" >提交修改</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: 'mailReset',
  data () {
    return {
      userId: '',
      userMail: '',
      userCheck: '',
      check: false,
      dis: false,
      second: 60,
      sending: true
    }
  },
  mounted () {
    this.userId = this.$route.params.id
  },
  computed: {
    mailVerification () {
      // 登录名@主机名.域名
      var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      if (this.userMail === '') {
        return ''
      } else if (!reg.test(this.userMail)) {
        return '格式错误!正确格式：登录名@主机名.域名'
      } else return ''
    }
  },
  methods: {
    timeDown () {
      const result = setInterval(() => {
        --this.second
        if (this.second < 0) {
          clearInterval(result)
          this.sending = true
          this.dis = false
          this.second = 60
        }
      }, 1000)
    },
    // 获取验证码
    getCode () {
      if (this.userMail !== '') {
        this.dis = true
        this.sending = false
        this.timeDown()
        console.log(this.dis)
        this.$axios({
          methods: 'post',
          url: '/user/getCode',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userMail: this.userMail,
            tag: true
          }
        })
          .then((response) => {
            console.log(response)
            if (response.data.data[0] === false) {
              alert(response.data.msg)
            } else {
              this.$message({
                type: 'success',
                message: '已发送'
              })
            }
          })
          .catch(function (error) { console.log(error) })
      }
    },
    onSubmit () {
      if (this.userMail !== '' && this.userCheck !== '') {
        this.$axios({
          methods: 'post',
          url: '/user/mailReset',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userId: this.userId,
            userMail: this.userMail,
            userCheck: this.userCheck
          }
        })
          .then((response) => {
            console.log(response)
            this.check = response.data.data
            if (this.check === true) {
              this.$router.push('/UserCenter/' + this.userId)
            } else {
              alert(response.data.msg)
            }
          })
          .catch(function (error) { console.log(error) })
      }
    }
  }
}
</script>

<style scoped>
.mailCheck_card {
  background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* transition: 0.3s; */
    width: 80%;
    border-radius: 5px;
    float:left;
    height: 100%;
    /* margin-top: 5%;
    margin-left: 10%; */
}
p {
    color: #666;
    font-size: 14px;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content:center;
}
.el-form{
    width:80%;
    margin: auto;
    height:20%;
}

.el-button{
      display: flex;
    justify-content: center;
    width: 40%;
}
/* .btn_submit{
  display: flex;
  justify-content: center;
  width: 40%;
} */

#checkSum{
    width:80%;
}
</style>
